<template>
    <div class="app-container">
        <div class="wrap">
            <div class="border" style="padding-right:3px;display: flex;align-items: flex-end ;flex-direction: column">
              <p style="margin-right: 10px;">Q{{qIndex+1}}</p>
              <el-button icon="el-icon-delete" circle    @click="(e, qBody) => {$emit('on-delete-question', e, qIndex)}"></el-button>
            </div>
            <div class="right_zujian" style="width: 100%">
                <div class="danxuan" style="height: 70px;">
                    <p  v-show="showadd==false"  @click="add" style="display: block"  >{{qBody.title}}</p>
                    <el-input  v-on:blur="blurTitleInput" placeholder="单选题目标题" v-model="qBody.title" v-show="showadd"  />
                </div>
                <el-radio-group v-model="qBody.rightAnswerId" style="width: 100%">
                    <div v-for="item in qBody.answers" style="flex-direction: row;display: flex;align-items: center;margin-left: 10px;height:45px;padding-left: 10px;width: 100%">
                        <el-radio :label="item.id"  style="align-items: center;">&nbsp;</el-radio>
                        <div style="flex-direction: row;justify-items: center;display: flex">
                            <p style="display: block;font-size:14px;width: 100%" v-show="item.isEdit == false" @click="edit(item)">{{item.atitle}}</p>
                            <el-input min style="font-size: 14px"   v-on:blur="blurInput(item)"  placeholder="选项1" v-model="item.atitle" v-show="item.isEdit" />
                            <el-button  type="text" icon="el-icon-delete" circle @click="deleteOption(item)" v-show="item.isEdit"></el-button>
<!--                          <el-upload v-show="item.isEdit"-->
<!--                            class="upload-demo"-->
<!--                            action="http://localhost:8883/fileuploads/upload"-->
<!--                                     :headers = "headers"-->
<!--                                     :show-file-list="false"-->
<!--                                     @on-success="handleAvatarSuccess(item)"-->
<!--                                     :before-upload="beforeAvatarUpload"-->
<!--                            >-->
<!--                            <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar">-->
<!--                            <el-button type="text" icon="el-icon-upload2" circle ></el-button>-->
<!--                          </el-upload>-->
                        </div>
                    </div>
                </el-radio-group>
                <div style="padding-left: 20px">
                  <el-button icon="el-icon-circle-plus"  circle @click="addOption"></el-button>
                  <el-button icon="el-icon-edit-outline"  circle @click="addAnswerKeys"></el-button>
                </div>
                <div v-show="showAnswerKeys" style="margin-top: 10px;margin-left: 10px;">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入答案解析"
                    v-model="qBody.answerKeys">
                  </el-input>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  import { getToken } from '@/utils/auth'
  export  default {
    name:'text-dan',
    data(){
      return{
        options:[
          {
            value:0,
            name:'选项1',
            isEdit:false
          },
          {
            value:1,
            name:'选项2',
            isEdit:false
          }
        ],
        headers:[],
        showAnswerKeys:false,
        hide1:false,
        one:'选项一',
        showadd:false,
        questionTitle:"单选题问题",
        showadd_duoxuan:false,
        danxuanValue:0
      }
    },
    props: {
      qIndex:Number,
      qBody:{
        type: Object,
        required: true
      }
    },
    mounted:function(){
      this.headers['Authorization'] = 'Bearer '+getToken()
    },
    methods:{
      edit:function(item){
        item.isEdit = true;
        console.log(event.target.parentNode.lastElementChild);
        event.target.parentNode.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.focus();
      },
      blurInput:function(item){
        item.isEdit = false;
      },
      addOption:function(){
        let  obj = {id:this.qBody.answers[this.qBody.answers.length-1].id+1,atitle:'选项'+(this.qBody.answers[this.qBody.answers.length-1].id+1),isEdit:false};
        this.qBody.answers.push(obj);
      },
      add(){
        this.showadd=true;
        event.target.parentNode.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.style.display="block";
        event.target.parentNode.lastElementChild.lastElementChild.focus();
      },
      blurTitleInput:function(){
        this.showadd = false;
      },
      addAnswerKeys:function () {
        this.showAnswerKeys = !this.showAnswerKeys;
      },
      deleteOption:function(item){
        let index = 0;
        for(index in this.qBody.answers){
          if(this.qBody.answers[index].id == item.id){
            this.qBody.answers.splice(index,1);
          }
        }
        //
      },
      handleAvatarSuccess(item,res, file) {
        console.log(item);
        console.log(res);
        //item.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  }
  }
</script>
<style scoped>
     .danxuan,.button{
        text-indent: 2em;
        line-height: 2em;
         width: 100%;

    }
    .wrap{

        width: 100%;
        display: flex;
        flex-direction: row;
        justify-items: start;
        overflow: hidden;
    }
    .danxuan{
        border-bottom: 1px solid #eee;
        width: 100%;
        height:50px;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .border{

        min-height: 130px;
        width: 100px;
        text-indent: 3em;
        margin-top: 1.3em;
        border-right: 1px solid #eee;
    }

</style>
